<template>
  <div class="homePage">
    <!-- 头条 -->
    <div
      v-for="item in headline"
      :key="item.id"
      class="headline"
      @click="$router.push({ path: '/article', query: {id: item.id} })"
    >
      <div>
        <img src="@/assets/images/home/tt.png" alt=""> {{ item.noticeTitle }}
      </div>
    </div>
    <div style="width: 8.64rem; height: 2.552rem">
      <!-- 轮播图 -->
      <div class="slideshow">
        <div class="block">
          <el-carousel v-if="bannerList.length > 0" ref="carousel" :interval="3000">
            <el-carousel-item v-for=" item in bannerList" :key="item.id">
              <el-image
                v-if="item.url"
                style="width:100%;height: 100%"
                :src="item && item.url ? baseUrl + item.url : ''"
                fit="fill"
                @click="$router.push({ path: '/article', query: {id: item.id} })"
              />
              <div v-else style="width: 100%; height: 100%; background-color: rgba(0,0,0,0.5)" />
              <div class="zhezhao">
                <p @click="$router.push({ path: '/article', query: {id: item.id} })">
                  {{ item.noticeTitle }}
                </p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 本地要闻 -->
      <div class="new-one">
        <div class="new-header">
          <ul v-for="item in btnList" :key="item.label">
            <li
              :id="item.id"
              @mouseover="mouseOver($event,item.id)"
              @mouseout="mouseOut($event,item.id)"
              @click="handleChangeTab(item.path)"
            >{{ item.label }}
            </li>
          </ul>
          <span class="genduo" @click="handleChangeTab('/newsCenter')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div v-if="isOne" class="new-nav" data-id="1">
          <table>
            <tr v-for="item in tableListOneNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListOneNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
        <div v-if="isTow" class="new-nav" data-id="2">
          <table>
            <tr v-for="item in tableListOneNew_1" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListOneNormal_1" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
        <div v-if="isThree" class="new-nav" data-id="3">
          <table>
            <tr v-for="item in tableListOneNew_2" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListOneNormal_2" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!-- 凝聚人心,汇聚力量 写死-->
    <div class="bannerOne">
      <div class="div1">
        <a href="http://www.ahtz.gov.cn/" target="_blank">
          <img
            src="@/assets/images/home/ningjurenxinbak.png"
            alt=""
          ></a>
      </div>
      <div class="right">
        <!--        <div class="div2">-->
        <div class="div2">
          <el-image
            class="img"
            fit="fill"
            :src="require('@/assets/images/home/learnNewLanguage.png')"
            @click="handleChangeTab('/learnNewTheory')"
          />
        </div>
        <!--        <div class="div3">
          <div class="a">
            <el-image
              class="smallImg"
              fit="fill"
              :src="require('@/assets/images/home/领导之窗.png')"
              @click="handleChangeTab('/windowOfLeadership')"
            />
          </div >
          <div class="a">
            <el-image
              class="smallImg"
              fit="fill"
              :src="require('@/assets/images/home/机构设置.png')"
              @click="handleChangeTab('/mechanismSetup')"
            />
          </div >
        </div >-->
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="news">
      <!-- 基层统战 -->
      <div class="new-three" >
        <div class="new-header">
          <span
            class="active"
            @click="handleChangeTab('/basicUnitedFront')"
          >基层统战</span>
          <span class="genduo" @click="handleChangeTab('/basicUnitedFront')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListSevenNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListSevenNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 多党合作 -->
      <div class="new-three">
        <div class="new-header">
          <span
            class="active"
            @click="handleChangeTab('/multiPartyCooperation')"
          >
            多党合作
          </span>
          <span
            class="genduo"
            @click="handleChangeTab('/multiPartyCooperation')"
          >
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListTwoNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListTwoNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 公示公告 -->
      <div class="new-three">
        <div class="new-header">
          <!--          <span-->
          <!--            class="active"-->
          <!--            @click="handleChangeTab('/publicAnnouncement')"-->
          <!--          >公示公告</span>-->
          <!--          <span @click="handleChangeTab('/inforBulletin')">信息公开</span>-->
          <ul v-for="item in btnInfoList" :key="item.label">
            <li
              :id="item.id"
              @mouseover="mouseInfoOver($event,item.id)"
              @mouseout="mouseInfoOut($event,item.id)"
              @click="handleChangeTab(item.path)"
            >{{ item.label }}
            </li>
          </ul>
          <span class="genduo" @click="handleChangeTab('/publicAnnouncement')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div v-if="isOneInfo" class="new-nav" data-id="4">
          <table>
            <tr v-for="item in tableListFourNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListFourNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
        <div v-if="isTwoInfo" class="new-nav" data-id="5">
          <table>
            <tr v-for="item in tableListFourNew_1" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListFourNormal_1" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 学习贯彻党的二十大精神 -->
      <!--      <a :href="middleBanner" target="_blank">-->
      <!--        <el-image class="bannerTwo" :src="middleSrc" alt="" />-->
      <!--      </a>-->
      <div v-if="isShow" class="bannerTwo">
        <a :href="ImageUrl" target="_blank">
          <el-image
            :src="Img && baseUrl + Img.url"
            style="height: 100%;width: 100%"
            fit="fill"
          />
        </a>
      </div>
      <!-- 港澳台侨 -->
      <div class="new-three">
        <div class="new-header">
          <span
            class="active"
            @click="handleChangeTab('/emigrant')"
          >港澳台侨</span>
          <span class="genduo" @click="handleChangeTab('/emigrant')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListFiveNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListFiveNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 非公经济 -->
      <div class="new-three">
        <div class="new-header">
          <span
            class="active"
            @click="handleChangeTab('/nonePublicEconomy')"
          >非公经济</span>
          <span class="genduo" @click="handleChangeTab('/nonePublicEconomy')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListSixNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListSixNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 新的社会阶层人士&党外知识分子 -->
      <div class="new-three">
        <div class="new-header">
          <span
            class="active"
            style="font-size: 0.09rem;text-align: left"
            @click="handleChangeTab('/newSocialClasses')"
          >
            党外知识分子和新的社会阶层
          </span>
          <span class="genduo" @click="handleChangeTab('/newSocialClasses')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListEightNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListEightNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>

       <!-- 党的建设-->
      <div class="new-three" style="margin-top: 0.156rem">
<!--        <p style="margin-top: 0.156rem; font-size: 0.09rem;">党的建设</p>-->
        <div class="new-header">
          <span class="active" @click="handleChangeTab('/partyBuilding')">党的建设</span>
          <span class="genduo" @click="handleChangeTab('/partyBuilding')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListTenNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListTenNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 民族宗教 -->
      <div class="new-three" style="margin-top: 0.156rem">
        <div class="new-header">
          <span
            class="active"
            @click="handleChangeTab('/nationalReligion')"
          >民族宗教</span>
          <span class="genduo" @click="handleChangeTab('/nationalReligion')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListThreeNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListThreeNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 理论园地 -->
      <div class="new-three" style="margin-top: 0.156rem">
        <div class="new-header">
          <span class="active" @click="handleChangeTab('/theoreticalGarden')">理论园地</span>
          <span class="genduo" @click="handleChangeTab('/theoreticalGarden')">
            更多
            <img src="@/assets/images/home/右键.png" alt="">
          </span>
        </div>
        <div class="new-nav">
          <table>
            <tr v-for="item in tableListNineNew" :key="item.id">
              <td>
                <li class="new" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
            <tr v-for="item in tableListNineNormal" :key="item.id">
              <td>
                <li class="normal" @click="$router.push({ path: '/article', query: {id: item.id} })">
                  <p>{{ item.noticeTitle }}</p>
                  <span>{{ item.pushTime.slice (5, 10) }}</span>
                </li>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 小轮播图 -->
      <!--      <div class="smallSlideshow">
              <div class="block">
                <el-carousel v-if="smallSlideshow.length > 0" ref="carousel" :interval="3000">
                  <el-carousel-item v-for="item in smallSlideshow" :key="item.id">
                    <el-image
                      v-if="item.url"
                      style="width:100%;height: 100%"
                      :src="item && item.url ? baseUrl + item.url : ''"
                      fit="fill"
                      @click="$router.push({ path: '/article', query: {id: item.id} })"
                    />
                    <div v-else style="width: 100%; height: 100%; background-color: rgba(0,0,0,0.5)" />
                    <div class="zhezhaoSmall">
                      <p @click="$router.push({ path: '/article', query: {id: item.id} })">
                        {{ item.noticeTitle }}
                      </p>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>-->
    </div>
    <div class="line">
      <div class="yqlj"  >
       <form name="form" id="form" >
         <select name="中央单位" onchange="window.open(this.options[this.selectedIndex].value)">
           <option value="">——  中央单位  ——</option>
           <option value='http://www.zytzb.gov.cn/html/index.html'>中央统战部</option>
           <option value='http://www.minge.gov.cn/'>中央国民党革命委员会中央委员会</option>
           <option value='https://www.mmzy.org.cn/'>中国民主同盟</option>
           <option value='https://www.cndca.org.cn/'>中国民主建国会</option>
           <option value='https://www.mj.org.cn/'>中国民主促进会</option>
           <option value='http://www.ngd.org.cn/'>中国农工民主党</option>
           <option value='http://www.zg.org.cn/'>中国致公党</option>
           <option value='http://www.93.gov.cn/'>九三学社中央委员会</option>
           <option value='https://www.taimeng.org.cn/'>台湾民主自治同盟</option>
           <option value='http://www.acfic.org.cn/'>全国工商联</option>
           <option value='https://www.neac.gov.cn/'>国家民族事务委员会</option>
           <option value='http://www.sara.gov.cn/gjzjswjhtml/index.html'>国家宗教事务局</option>
           <option value='https://www.zysy.org.cn/'>中央社会主义学院</option>
         </select>
         <select name="各省统战部" onchange="window.open(this.options[this.selectedIndex].value)">
           <option value="">—— 各省统战部 ——</option>
           <option value='http://www.bjtzb.org.cn/wwwroot/sdtyzx/publish/article/index.shtml'>首都统一战线</option>
           <option value='http://www.ahtz.gov.cn/'>安徽统一战线</option>
           <option value='http://www.tjtzb.org.cn/'>天津统一战线</option>
           <option value='http://www.hbtzb.gov.cn/'>河北统一战线</option>
           <option value='http://www.sxstzb.gov.cn/'>山西统一战线</option>
           <option value='http://www.nmgtzb.gov.cn/'>内蒙古统一战线</option>
           <option value='http://www.lntzb.gov.cn/'>辽宁统一战线</option>
           <option value='http://www.jlswtzb.cn/'>吉林统一战线</option>
           <option value='http://www.hljtyzx.gov.cn/index.html'>黑龙江统一战线</option>
           <option value='https://www.shtzb.org.cn/'>上海统一战线</option>
           <option value='http://www.jstz.org.cn/'>江苏统一战线</option>
           <option value='http://www.qxzh.zj.cn/'>浙江统一战线</option>
           <option value='http://www.fjtzb.gov.cn/'>福建统一战线</option>
           <option value='http://www.jxtyzx.org/'>江西统一战线</option>
           <option value='http://www.sdtzb.gov.cn/'>山东统一战线	</option>
           <option value='http://www.rootinhenan.gov.cn/sitesources/rootinhenan/page_pc/index.html'>河南统一战线</option>
           <option value='http://www.hbtyzx.gov.cn/'>湖北统一战线</option>
           <option value='https://www.hnswtzb.org/'>湖南统一战线</option>
           <option value='http://www.tongxin.org/'>广东统一战线</option>
           <option value='https://www.gxtzb.cn/'>广西统一战线</option>
           <option value='http://www.hntzb.org.cn/'>海南统一战线</option>
           <option value='https://www.cqtzb.gov.cn/'>重庆统一战线</option>
           <option value='http://www.sctyzx.gov.cn/'>四川统一战线</option>
           <option value='http://www.gzswtzb.org.cn/'>贵州统一战线</option>
           <option value='http://www.swtzb.yn.gov.cn/'>云南统一战线</option>
           <option value='http://www.xztzb.gov.cn/'>西藏统一战线</option>
           <option value='http://www.zgsxswtzb.gov.cn/'>陕西统一战线</option>
           <option value='http://www.gsswtzb.gov.cn/'>甘肃统一战线</option>
           <option value='http://www.qhtyzx.com/'>青海统一战线</option>
           <option value='https://www.nxtzb.gov.cn/'>宁夏统一战线</option>
           <option value='http://www.xjtzb.gov.cn/'>新疆统一战线</option>
           <option value='http://bttzb.xjbt.gov.cn/'>新疆建设兵团统战</option>
         </select>
         <select name="各地市统战部" onchange="window.open(this.options[this.selectedIndex].value)">
           <option value="">—— 各地市统战部 ——</option>
           <option value='http://swtzb.hefei.gov.cn/'>合肥统一战线</option>
           <option value='http://hbtz.gov.cn/'>淮北统一战线</option>
           <option value='http://www.fytzb.gov.cn/'>阜阳统一战线</option>
           <option value='http://www.cztyzx.gov.cn/'>滁州统一战线</option>
           <option value='http://www.latzb.gov.cn/'>六安统一战线</option>
           <option value='http://www.mastz.cn/'>马鞍山统一战线</option>
           <option value='http://tzb.wh.cn/'>芜湖统一战线</option>
           <option value='http://www.xctzb.gov.cn/'>宣城统一战线</option>
           <option value='http://www.tltzb.com/'>铜陵统一战线</option>
           <option value='http://swtzb.chizhou.gov.cn/'>池州统一战线</option>
           <option value='http://www.aqtz.gov.cn/'>安庆统一战线</option>
           <option value='http://swtzb.huangshan.gov.cn/'>黄山统一战线</option>
           <option value='http://www.hqtzb.gov.cn/'>霍邱县统一战线</option>
           <!-- <option value='http://tzb.yixian.gov.cn/'>黟县统一战线</option> -->
           <option value='http://www.hsqtz.gov.cn/'>黄山市黄山区统一战线</option>
           <!-- <option value='http://zw.ahtxq.gov.cn/'>黄山市屯溪区统一战线</option> -->
         </select>
       </form>
            </div>
      </div>
  </div>
</template>
<script >
import { GetHomeList } from '@/api';
import { GetContentTypeList } from '@/api/contentnotice';
import { GetMiddleBanner } from '@/api/banner';

export default {
  name: 'Home',
  data() {
    return {
      middleSrc: require('@/assets/images/home/凝聚人心.png'),
      baseUrl: '',
      // 头条
      headline: [],
      // 大轮播图
      bannerList: [],
      // 小轮播图
      smallSlideshow: [],
      // 本地要闻 工作动态 时政要闻
      tableListOneNew: [],
      tableListOneNormal: [],
      tableListOneNew_1: [],
      tableListOneNormal_1: [],
      tableListOneNew_2: [],
      tableListOneNormal_2: [],
      // 多党合作
      tableListTwoNew: [],
      tableListTwoNormal: [],
      // 民族宗教
      tableListThreeNew: [],
      tableListThreeNormal: [],
      // 公示公告 信息公开
      tableListFourNew: [],
      tableListFourNormal: [],
      tableListFourNew_1: [],
      tableListFourNormal_1: [],
      // 港澳台侨
      tableListFiveNew: [],
      tableListFiveNormal: [],
      // 非公经济
      tableListSixNew: [],
      tableListSixNormal: [],
      // 基层统战
      tableListSevenNew: [],
      tableListSevenNormal: [],
      // 新的社会阶层人士&党外知识分子
      tableListEightNew: [],
      tableListEightNormal: [],
      // 理论园地
      tableListNineNew: [],
      tableListNineNormal: [],
      // 党的建设
      tableListTenNew: [],
      tableListTenNormal: [],
      params: {
        current: 1,
        keyword: '',
        size: 6,
        typeId: ''
      },
      paramsBanner: {},
      isShow: false,
      ImageUrl: '',
      Img: {},
      // btnList: [
      //   {
      //     id: '1',
      //     label: '本地要闻',
      //     path: '/newsCenter'
      //   },
      //   {
      //     id: '2',
      //     label: '工作动态',
      //     path: '/workTrend'
      //   },
      //   {
      //     id: '3',
      //     label: '时政要闻',
      //     path: '/newsPolitical'
      //   }
      // ],
      btnList: [
        {
          id: '1',
          label: '时政要闻',
          path: '/newsPolitical'
        },
        {
          id: '2',
          label: '本地要闻',
          path: '/newsCenter'
        },
        {
          id: '3',
          label: '工作动态',
          path: '/workTrend'
        }
      ],
      btnInfoList: [
        {
          id: '4',
          label: '公示公告',
          path: '/publicAnnouncement'
        },
        {
          id: '5',
          label: '信息公开',
          path: '/inforBulletin'
        }
      ],
      typeId: '',
      isOne: true,
      isTow: false,
      isThree: false,
      timer: null,
      timer1: null,
      timer2: null,
      index: 0,
      isOneInfo: true,
      isTwoInfo: false,
      indexInfo: 3
    };
  },
  mounted() {
    document.getElementById('1').className = 'active'
    document.getElementById('4').className = 'active'
    this.timer = setInterval(() => {
      this.initHorse()
    }, 4000)
    this.timer1 = setInterval(() => {
      this.changeNav()
    }, 10000)
    this.timer2 = setInterval(() => {
      this.changeInfoNav()
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
  },
  created() {
    // 假数据 自己模拟
    // this.headline = mockData.headline
    // this.bannerList = mockData.bannerList
    // this.tableListOneNew = mockData.tableListOneNew
    // this.tableListOneNormal = mockData.tableListOneNormal
    // this.tableListOneNew_1 = mockData.tableListOneNew_1
    // this.tableListOneNormal_1 = mockData.tableListOneNormal_1
    // this.tableListOneNew_2 = mockData.tableListOneNew_2
    // this.tableListOneNormal_2 = mockData.tableListOneNormal_2
    // this.tableListTwoNew = mockData.tableListTwoNew
    // this.tableListTwoNormal = mockData.tableListTwoNormal
    // this.tableListThreeNew = mockData.tableListThreeNew
    // this.tableListThreeNormal = mockData.tableListThreeNormal
    // this.tableListFourNew = mockData.tableListFourNew
    // this.tableListFourNormal = mockData.tableListFourNormal
    // this.tableListFourNew_1 = mockData.tableListFourNew_1
    // this.tableListFourNormal_1 = mockData.tableListFourNormal_1
    // this.tableListFiveNormal = mockData.tableListFiveNormal
    // this.tableListSixNormal = mockData.tableListSixNormal
    // this.tableListSevenNormal = mockData.tableListSevenNormal
    // this.tableListEightNew = mockData.tableListEightNew
    // this.tableListEightNormal = mockData.tableListEightNormal
    // this.tableListNineNew = mockData.tableListNineNew
    // this.tableListNineNormal = mockData.tableListNineNormal
    // this.smallSlideshow = mockData.smallSlideshow
    this.initData()
    this.baseUrl = window.location.origin + '/api/'
    console.log('技术支持--', '研发团队：张传琦（15305549335）')
  },
  methods: {
    initData() {
      const formData = new FormData()
      // 第一个值是key,第二个是value
      formData.append('current', 1)
      formData.append('size', 999)
      const params1 = new URLSearchParams(formData)
      GetContentTypeList(params1).then(res => {
        this.typeList = res.data.records
        this.typeList.forEach(item => {
          this.params.typeId = item.id
          if (item.typeName === '本地要闻' || item.typeName === '工作动态' || item.typeName === '时政要闻') {
            this.params.size = 8
            this.getData(item.typeName)
          } else if (item.typeName === '轮播页' || item.typeName === '轮播专题') {
            this.params.size = 8
            this.getData(item.typeName)
          } else if (item.typeName === '头条') {
            this.params.size = 1
            this.getData(item.typeName)
          } else {
            this.params.size = 5
            this.params.label ? delete this.params.label : ''
            this.getData(item.typeName)
          }
        })
      })
      this.getBanner()
    },
    // getTypeId(name) {
    //   const formData = new FormData()
    //   // 第一个值是key,第二个是value
    //   formData.append('current', 1)
    //   formData.append('size', 999)
    //   const params1 = new URLSearchParams(formData)
    //   GetContentTypeList(params1).then(res => {
    //     this.typeId = res.data.records.filter(item => (item.typeName === name))[0].id
    //   })
    //   return this.typeId
    // },
    getBanner() {
      GetMiddleBanner(this.paramsBanner).then(res => {
        if (res.success === true && res.data) {
          console.log(this.Img)
          this.isShow = true
          this.Img = res.data
          this.ImageUrl = res.data.subjectLink
          console.log(this.Img && this.baseUrl + this.Img.url)
        }
      })
    },
    getData(val) {
      GetHomeList(this.params).then(res => {
        const { records } = res.data
        val === '轮播页' && (this.bannerList = records)
        val === '头条' && (this.headline.push(records[0]))
        val === '时政要闻' && (this.tableListOneNew = this.judgeNewDate(records)) && (this.tableListOneNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '本地要闻' && (this.tableListOneNew_1 = this.judgeNewDate(records)) && (this.tableListOneNormal_1 = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '工作动态' && (this.tableListOneNew_2 = this.judgeNewDate(records)) && (this.tableListOneNormal_2 = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '多党合作' && (this.tableListTwoNew = this.judgeNewDate(records)) && (this.tableListTwoNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '民族宗教' && (this.tableListThreeNew = this.judgeNewDate(records)) && (this.tableListThreeNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '公示公告' && (this.tableListFourNew = this.judgeNewDate(records)) && (this.tableListFourNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '信息公开' && (this.tableListFourNew_1 = this.judgeNewDate(records)) && (this.tableListFourNormal_1 = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '港澳台侨' && (this.tableListFiveNew = this.judgeNewDate(records)) && (this.tableListFiveNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '非公经济' && (this.tableListSixNew = this.judgeNewDate(records)) && (this.tableListSixNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '基层统战' && (this.tableListSevenNew = this.judgeNewDate(records)) && (this.tableListSevenNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '党外知识分子和新的社会阶层' && (this.tableListEightNew = this.judgeNewDate(records)) && (this.tableListEightNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '理论园地' && (this.tableListNineNew = this.judgeNewDate(records)) && (this.tableListNineNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        val === '党的建设' && (this.tableListTenNew = this.judgeNewDate(records)) && (this.tableListTenNormal = records.filter(item => !this.judgeNewDate(records).includes(item)))
        // val === '轮播专题' && (this.smallSlideshow = records)
      })
    },
    judgeNewDate(arr) {
      const now = new Date();
      const year = now.getFullYear(); // 获取完整的年份(4位,1970-????)
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const time = year + '-' + month + '-' + day
      const newDateArr = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].pushTime.slice(0, 10) === time) {
          newDateArr.push(arr[i])
        }
      }
      return newDateArr
    },
    initHorse() {
      const temp1 = this.tableListOneNormal.shift()
      this.tableListOneNormal.push(temp1)
      const temp1_1 = this.tableListOneNormal_1.shift()
      this.tableListOneNormal_1.push(temp1_1)
      const temp1_2 = this.tableListOneNormal_2.shift()
      this.tableListOneNormal_2.push(temp1_2)
      const temp2 = this.tableListTwoNormal.shift()
      this.tableListTwoNormal.push(temp2)
      const temp3 = this.tableListThreeNormal.shift()
      this.tableListThreeNormal.push(temp3)
      const temp4 = this.tableListFourNormal.shift()
      this.tableListFourNormal.push(temp4)
      const temp4_1 = this.tableListFourNormal_1.shift()
      this.tableListFourNormal_1.push(temp4_1)
      const temp5 = this.tableListFiveNormal.shift()
      this.tableListFiveNormal.push(temp5)
      const temp6 = this.tableListSixNormal.shift()
      this.tableListSixNormal.push(temp6)
      const temp7 = this.tableListSevenNormal.shift()
      this.tableListSevenNormal.push(temp7)
      const temp8 = this.tableListEightNormal.shift()
      this.tableListEightNormal.push(temp8)
      const temp9 = this.tableListNineNormal.shift()
      this.tableListNineNormal.push(temp9)
      const temp10 = this.tableListTenNormal.shift()
      this.tableListTenNormal.push(temp10)
    },
    changeNav() {
      if (this.index >= 3) {
        this.index = 0
      }
      this.index++
      const indexStr = this.index + ''
      const arr = []
      for (let j = 0; j < this.btnList.length; j++) {
        if (this.btnList[j].id !== indexStr) {
          arr.push(this.btnList[j])
        }
      }
      for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i].id).className = 'inActive'
      }
      document.getElementById(indexStr).className = 'active'
      if (indexStr === '1') {
        this.isOne = true
        this.isTow = false
        this.isThree = false
      } else if (indexStr === '2') {
        this.isOne = false
        this.isTow = true
        this.isThree = false
      } else {
        this.isOne = false
        this.isTow = false
        this.isThree = true
      }
    },
    handleChangeTab(path) {
      this.$router.push(path);
    },
    // 点击预览鼠标悬停事件
    mouseOver($event, id) {
      clearInterval(this.timer1)
      const arr = []
      for (let j = 0; j < this.btnList.length; j++) {
        if (this.btnList[j].id !== id) {
          arr.push(this.btnList[j])
        }
      }
      for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i].id).className = 'inActive'
      }
      $event.currentTarget.className = 'active'
      if (id === '1') {
        this.isOne = true
        this.isTow = false
        this.isThree = false
      } else if (id === '2') {
        this.isOne = false
        this.isTow = true
        this.isThree = false
      } else {
        this.isOne = false
        this.isTow = false
        this.isThree = true
      }
    },
    mouseOut($event, id) {
      this.timer1 = setInterval(() => {
        this.changeNav()
      }, 10000)
    },
    changeInfoNav() {
      if (this.indexInfo >= 5) {
        this.indexInfo = 3
      }
      this.indexInfo++
      const indexInfoStr = this.indexInfo + ''
      const arr = []
      for (let j = 0; j < this.btnInfoList.length; j++) {
        if (this.btnInfoList[j].id !== indexInfoStr) {
          arr.push(this.btnInfoList[j])
        }
      }
      for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i].id).className = 'inActive'
      }
      document.getElementById(indexInfoStr).className = 'active'
      if (indexInfoStr === '4') {
        this.isOneInfo = true
        this.isTwoInfo = false
      } else {
        this.isOneInfo = false
        this.isTwoInfo = true
      }
    },
    mouseInfoOver($event, id) {
      clearInterval(this.timer2)
      const arr = []
      for (let j = 0; j < this.btnInfoList.length; j++) {
        if (this.btnInfoList[j].id !== id) {
          arr.push(this.btnInfoList[j])
        }
      }
      for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i].id).className = 'inActive'
      }
      $event.currentTarget.className = 'active'
      if (id === '4') {
        this.isOneInfo = true
        this.isTwoInfo = false
      } else {
        this.isOneInfo = false
        this.isTwoInfo = true
      }
    },
    mouseInfoOut($event, id) {
      this.timer2 = setInterval(() => {
        this.changeInfoNav()
      }, 10000)
    }
  }
};
</script >
<!-- <style scoped lang="scss" > -->
<style scoped lang="less">
@aaa: 192;
.homePage {
  margin: 0 auto (40rem / @aaa);
  width: (1660rem / @aaa);
  // height: (1900rem / @aaa);
  background: #ffffff;
}

// 头条
.headline {
  position: relative;
  height: (56rem / @aaa);
  margin: (30rem / @aaa) auto;
  line-height: (56rem / @aaa);
  color: #024da0;
  font-weight: bold;
  // text-align: center;
}

.headline div {
  font-size: (40rem / @aaa);
  line-height: (56rem / @aaa);
  color: #024da0;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  width: (1200 / @aaa);
  white-space: nowrap;
  /* 文本不会换行 */
  overflow: hidden;
  /* 隐藏超出元素宽度的内容 */
  text-overflow: ellipsis;
  /* 显示省略符号来代表被修剪的文本 */
}

.headline img {
  width: (107rem / @aaa);
  height: (56rem / @aaa);
}

// 轮播图
.slideshow {
  //width: (682rem / @aaa);
  width: 906rem/@aaa;
  //width: 747rem/@aaa;
  // height: (490rem / @aaa);
  float: left;

  .block {
    // height: (490rem / @aaa);
    .el-carousel {
      height: (490rem / @aaa);

      .zhezhao {
        width: 100%;
        //height: 5vh;
        background-color: #000;
        position: absolute;
        bottom: 0;
        opacity: 0.5;
        /*z-index: 9999;*/

        p {
          width: 50%;
          text-align: left;
          font-size: (18rem / @aaa);
          color: #fff;
          height: (50rem / @aaa);
          line-height: (27rem / @aaa);
          padding-left: 1vw;
          padding-top: 0.5em;
          //padding: (450rem / @aaa) 0 (19rem / @aaa) (17rem / @aaa);
          font-weight: 400;
          font-family: PingFangSC, PingFang SC;
          white-space: nowrap;
          /* 文本不会换行 */
          overflow: hidden;
          /* 隐藏超出元素宽度的内容 */
          text-overflow: ellipsis;
        }
      }
    }

    // ul
    /deep/ .el-carousel__indicators--horizontal {
      position: absolute;
      left: (538rem / @aaa);
      bottom: (0rem / @aaa);
      display: flex;
    }

    // li
    /deep/ .el-carousel__indicator--horizontal {
      margin-bottom: (20rem / @aaa);
      height: 0px;
    }

    /deep/ .el-carousel__container {
      height: (490rem / @aaa);
    }

    /deep/ .el-carousel__button {
      // 指示器按钮
      width: (10rem / @aaa);
      height: (10rem / @aaa);
      border: none;
      border-radius: 50%;
      background-color: #fff;
      opacity: 1;
    }

    /deep/ .is-active .el-carousel__button {
      // 指示器激活按钮
      background: #024da0;
      width: (34rem / @aaa);
      border-radius: (6rem / @aaa);
    }
  }
}

// 小轮播图
.smallSlideshow {
  width: (384rem / @aaa);
  margin-top: (30rem / @aaa);

  .block {
    .el-carousel {
      height: (312.5rem / @aaa);

      /deep/ .el-carousel__container {
        height: (312.5rem / @aaa);
      }

      .zhezhaoSmall {
        width: 100%;
        //height: 3vh;
        background-color: #000;
        position: absolute;
        bottom: 0;
        opacity: 0.5;
        /*z-index: 9999;*/

        p {
          width: 50%;
          text-align: left;
          font-size: (9rem / @aaa);
          color: #fff;
          height: (34.5rem / @aaa);
          line-height: (16rem / @aaa);
          font-weight: 400;
          padding-left: 1vw;
          padding-top: 0.5em;
          //padding: (450rem / @aaa) 0 (19rem / @aaa) (17rem / @aaa);
          font-family: PingFangSC, PingFang SC;
          white-space: nowrap;
          /* 文本不会换行 */
          overflow: hidden;
          /* 隐藏超出元素宽度的内容 */
          text-overflow: ellipsis;
        }
      }
    }

    /deep/ .el-carousel__indicators--horizontal {
      left: (230rem / @aaa);
      transform: none;
      bottom: (0rem / @aaa);
      // height: (16rem / @aaa);
      // padding: 0;
      display: flex;
    }

    /deep/ .el-carousel__indicator--horizontal {
      margin-bottom: (10rem / @aaa);
      height: 0px;
    }

    /deep/ .el-carousel__button {
      // 指示器按钮
      width: (6rem / @aaa);
      height: (6rem / @aaa);
      border: none;
      border-radius: 50%;
      background-color: #fff;
      opacity: 1;
    }

    /deep/ .is-active .el-carousel__button {
      // 指示器激活按钮
      background: #024da0;
      width: (12rem / @aaa);
      border-radius: (3rem / @aaa);
    }
  }
}

// 本地要闻
.new-one {
  float: left;
  margin-top: (8rem / @aaa);
  margin-left: (30rem / @aaa);
  //width: (498rem / @aaa);
  //width: 563rem/@aaa;
  width: 722rem/@aaa;
  height: (490rem / @aaa);

  .new-nav {
    td {
      //width: (498rem / @aaa);
      //width: 558rem/@aaa;
      width: 722rem/@aaa;
      p {
        //width: (405rem / @aaa);
        //width: 465rem/@aaa;
        width: 625rem/@aaa;
        white-space: nowrap;
        /* 文本不会换行 */
        overflow: hidden;
        /* 隐藏超出元素宽度的内容 */
        text-overflow: ellipsis;
        /* 显示省略符号来代表被修剪的文本 */
      }
    }

    .new {
      p {
        //width: (383rem / @aaa);
        width: 443rem/@aaa;
      }
    }
  }
}

.news {
  // height: (1110rem / @aaa);
  width: (1660rem / @aaa);
  margin-bottom: (40rem / @aaa);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

// 三分新闻列表
.new-three {
  margin-top: (8rem / @aaa);
  //width: (384rem / @aaa);
  // width: 430rem/@aaa;
   width: 540rem/@aaa;
  .new-nav {
    .new {
      p {
        //width: (324rem / @aaa);
        width: (434rem / @aaa);
      }
    }

    td {
      width: (540rem / @aaa);
      //width: (430rem / @aaa);

      p {
        //width: (346rem / @aaa);
        width: (440rem / @aaa);
        white-space: nowrap;
        /* 文本不会换行 */
        overflow: hidden;
        /* 隐藏超出元素宽度的内容 */
        text-overflow: ellipsis;
        /* 显示省略符号来代表被修剪的文本 */
      }
    }
  }
}

// 新闻头部通用
.new-header {
  position: relative;
  //height: (30rem / @aaa);
  height: (38rem / @aaa);
  background-color: #d4effe;
  border-bottom: (2rem / @aaa) solid #024da0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  span {
    line-height: (34rem / @aaa);
    //line-height: (28rem / @aaa);
    font-size: (20rem / @aaa);
    color: #024da0;
    text-align: center;
    margin-left: (28rem / @aaa);
    //margin-left: (28rem / @aaa);
  }

  ul {
    li {
      line-height: (34rem / @aaa);
      //line-height: (28rem / @aaa);
      font-size: (22rem / @aaa);
      color: #024da0;
      text-align: center;
      margin-left: (28rem / @aaa);
      // 字间距
      letter-spacing: (2rem / @aaa);
    }
  }

  .active {
    height: (44rem / @aaa);
    //height: (38rem / @aaa);
    background-color: #024da0;
    border-radius: (8rem / @aaa) 0 (8rem / @aaa) 0;
    font-size: (30rem / @aaa);
    //font-size: (24rem / @aaa);
    font-weight: 600;
    color: #fff;
    line-height: (46rem / @aaa);
    //line-height: (46rem / @aaa);
    padding: 0 (25rem / @aaa);
    margin-left: 0;
    letter-spacing: (3rem / @aaa);
  }

  .inActive {
    line-height: (34rem / @aaa);
    //line-height: (28rem / @aaa);
    font-size: 22rem/@aaa;
    //font-size: (18rem / @aaa);
    color: #024da0;
    text-align: center;
    margin-left: (28rem / @aaa);
  }

  .genduo {
    line-height: (34rem / @aaa);
    //line-height: (28rem / @aaa);
    font-size: (20rem / @aaa);
    //font-size: (16rem / @aaa);
    font-weight: 400;
    color: #024da0;
    text-align: right;
  }

  img {
    width: (5rem / @aaa);
    height: (8rem / @aaa);
    margin-left: (5rem / @aaa);
    margin-right: (10rem / @aaa);
  }
}

// 新闻列表通用
.new-nav {
  li {
    //border-bottom: (1rem / @aaa) dashed black;
    border-bottom: (1rem / @aaa) dashed #dedede;
    color: #d8d8d8;
    //font-size: (16rem / @aaa);
    //font-size: 20rem/@aaa;
    font-size: 24rem/@aaa;
    letter-spacing: (3rem / @aaa);
    height: (55.5rem / @aaa);
    line-height: (55.5rem / @aaa);
    position: relative;
  }

  p {
    position: absolute;
    // top: 0;
    bottom: 0;
    color: #232323;
  }

  p:hover {
    color: #024da0;
  }

  span {
    position: absolute;
    right: 0;
    color: #666;
  }

  .normal {
    list-style: disc;

    p {
      left: (20rem / @aaa);
    }
  }

  .new {
    background-image: url("../../assets/images/home/新.png");
    background-repeat: no-repeat;
    background-size: (17rem / @aaa);
    background-position-y: 50%;
    background-position-x: (19rem / @aaa);
    list-style: disc;

    p {
      //width: (266rem / @aaa);
      width: 312rem/@aaa;
      left: (42rem / @aaa);
    }
  }
}

.bannerOne {
  margin: (30rem / @aaa) 0;
  height: (112rem / @aaa);
  // float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .div1 {
    width: (906rem / @aaa);
    //width: (747 / @aaa);
    //width: (682rem / @aaa);
    position: relative;
    height: 100%;

    a {
      width: (906rem / @aaa);
      //width: (747rem / @aaa);
      //width: (682rem / @aaa);
      position: absolute;
      height: 100%;
      top: 0;
      height: 100%;
    }

    img {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .right {
    width: (722rem / @aaa);
    //width: (563rem / @aaa);
    //width: (498rem / @aaa);
    position: relative;
    height: 100%;

    .div2 {
      width: (563rem / @aaa);
      //width: (498rem / @aaa);
      height: 60%;
      //position: absolute;
      .img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }

   /* .div3 {
      width: (331rem / @aaa);
      height: 40%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .a {
        width: (162rem / @aaa);
        height: 100%;
        position: relative;

        .smallImg {
          position: absolute;
          bottom: 0;
          height: 100%;
          width: (162rem / @aaa);
        }
      }
    }*/
  }
}

.bannerTwo {
  width: (1660rem / @aaa);
  height: (112rem / @aaa);
  margin: (25rem / @aaa) 0;

  /deep/ .el-image {
    display: block;
  }
}

//友情链接
.line {
  //width: 1200rem/@aaa;
  //width: 2000rem/@aaa;
  width: 1920rem/@aaa;
  margin-left: -130rem/@aaa;
  background-color: #024DA0;
  border:(1rem/@aaa) #005189 solid;
  margin-bottom: -40rem/@aaa;
  .yqlj{
    width:1920rem/@aaa;
    height:60rem/@aaa;
    //background:url(images/yqlj.png) no-repeat scroll 100px 12px;
    padding:0 130rem/@aaa;
    //padding:0 360rem/@aaa;
    text-align:center;
    border:(1rem/@aaa) #005189 solid;
    form{
      margin-left: 7rem/@aaa;
      width:1660rem/@aaa;
      //width:1200rem/@aaa;
      height: 60rem/@aaa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      select{
        font-size: 20rem/@aaa;
        //font-size: 18rem/@aaa;
        line-height: 40rem/@aaa;
        height: 40rem/@aaa;
        width: 430rem/@aaa;
        //width: 384rem/@aaa;
        text-align: center;
        border: 1rem/@aaa;
        outline: none;
      }
      option{
        //font-size: 23rem/@aaa;
        width: 430rem/@aaa;
        font-size: 20rem/@aaa;
        text-align: center;

      }
    }
  }
  //form{
  //  width:1200rem/@aaa;
  //  height: 60rem/@aaa;
  //  display: flex;
  //  justify-content: space-between;
  //  align-items: center;
  //  select{
  //    //font-size: 25rem/@aaa;
  //    font-size: 20rem/@aaa;
  //    line-height: 40rem/@aaa;
  //    height: 40rem/@aaa;
  //    width: 384rem/@aaa;
  //    text-align: center;
  //    border: 1rem/@aaa;
  //    outline: none;
  //  }
  //  option{
  //    //font-size: 23rem/@aaa;
  //    font-size: 18rem/@aaa;
  //    text-align: center;
  //
  //  }
  //}
  .yqlj a{
    width: 360rem/@aaa;
    text-align: center;
    color:#2c3134;
    display:block;
    line-height:40rem/@aaa;
  }

}
</style >
